﻿@model string
@{Guid id = Guid.NewGuid();
    Dictionary<string, object> htmlAttr = new Dictionary<string, object>();
    if (null != ViewData["htmlAttributes"])
    {
        var properties = ViewData["htmlAttributes"].GetType().GetProperties().ToList();
        properties.ForEach(p => htmlAttr.Add(p.Name, p.GetValue(ViewData["htmlAttributes"]).ToString()));
    }
    htmlAttr.Add("width", "30px");
    htmlAttr.Add("height", "30px");
}
@Html.ImageFor(model=>model,htmlAttr)
<span id="@id" />
<script type="text/javascript">
    $(function () {
        xOffset = 10;
        yOffset = 30;
        $("#@(id)").parent().find("img").hover(function (e) {
            $("<img id='@(id)imgshow' src='" + this.src + "' style='border:1px;border-color:black;max-height:300px;max-width:300px;'/>").appendTo("body");
            $("#@(id)imgshow")
                .css("position", "absolute")
                .css("top", (e.pageY - xOffset) + "px")
                .css("left", (e.pageX + yOffset) + "px")
                .fadeIn("fast");
        }, function () {
            $("#@(id)imgshow").remove();
        });

        $("#@(id)").find("img").mousemove(function (e) {
            $("#@(id)imgshow")
                .css("position", "absolute")
               .css("top", (e.pageY - xOffset) + "px")
               .css("left", (e.pageX + yOffset) + "px")
        });
    });
</script>
